body { font-family: 'Inter', sans-serif; background-color: #050810; color: #cbd5e1; margin: 0; scroll-behavior: smooth; }
        .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.05); border-color:rgb(99 102 241 / 0.2); }
        
        /* Slider Fix: Fixed height and centered flex */
        .slider-wrapper { height: 500px; position: relative; overflow: hidden; background: #050810; width: 100%; }
        .slide { 
            position: absolute; inset: 0; opacity: 0; 
            transition: opacity 0.6s ease-in-out; 
            display: flex; flex-direction: column; align-items: center; justify-content: center; 
            text-align: center; padding: 0 24px;
        }
        .slide.active { opacity: 1; z-index: 10; }
        
        /* Background Gradients */
        .bg-1 { background: radial-gradient(circle at center, rgba(99,102,241,0.12) 0%, #050810 80%); }
        .bg-2 { background: radial-gradient(circle at center, rgba(16,185,129,0.12) 0%, #050810 80%); }
        .bg-3 { background: radial-gradient(circle at center, rgba(249,115,22,0.12) 0%, #050810 80%); }

        /* Mobile Nav Toggle */
        #mobile-nav-box { display: none; }
        #mobile-nav-box.show { display: block; }
		
		/* High Quality Blurred Backgrounds */
        .slide-image-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: blur(1px) brightness(0.4);
            transform: scale(1.1);
            z-index: 1;
        }
		
		/* Centered Content Box */
        .glass-box {
            position: relative;
            z-index: 50;
            max-width: 700px;
            padding: 40px;
            text-align: center;
            color: white;            
            border: 0px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            margin: 0 20px;
        }
		
		.menu_icon
		{
			height:25px;
			width: 30px;
		}
		
		.img-align
		{
			width:14em;
		}
		
		.img-top-pad
		{
			padding:0 0 0 0;
		}
		
		.header_bg
		{			
			background: rgba(255, 255, 255, 0.7); 
			backdrop-filter: blur(15px);
		}
		
		.modern-gradient {
			background: linear-gradient(to bottom, #f0fdf4 0%, #e0f2fe 50%, #ffffff 100%);
		}
		
		.modern-gradient-alt {
			background: linear-gradient(to bottom, #ffffff 0%, #e0f2fe 50%, #f0fdf4 100%);
		}

		.page-background
		{
			background-color : #e2e8f0;
		}

		.page-background-white
		{
			background-color : #ffffff;
		}		
		
		.text-theme-blu
		{
			--tw-text-opacity;
			color: #013f77;			
		}
		
		.text-theme-grn
		{
			--tw-text-opacity;
			color: #4ab63a;			
		}
		
		.text-main
		{
			--tw-text-opacity;
			color: #000f34;			
		}
		
		.text-sub
		{
			--tw-text-opacity;
			color: #334155;			
		}
		
		.text-content
		{
			--tw-text-opacity;
			color: #475569;			
		}
		
		.text-highlight
		{
			--tw-text-opacity;
			color: #4ab63a;			
		}
		
		.text-link
		{
			--tw-text-opacity;
			color: #334155;			
		}
		
		.text-button
		{			
			background-color:#013f77;
			color:#ffffff;			
		}
		
		.text-button-hover
		{			
			background-color:#4ab63a;
			color: #ffffff;			
		}
		
		.text-tile-content
		{
			--tw-text-opacity;
			color: #e4e8ed;			
		}
		.text-menu
		{
			--tw-text-opacity;
			color: #013f78;			
		}
		
		.text-menu-hover
		{
			--tw-text-opacity;
			color: #334155;			
		}
		
		.menu-mobile
		{
			/* background-color:rgb(237 237 237); */
		}
		
		.text-border
		{
			border: 1px solid rgba(255, 255, 255, 0.05);
			border-color:rgb(99 102 241 / 0.2);
		}
		
		/* CLIENTS SLIDER --------------- * /

/* --- 1. Base Container (Desktop/Monitors) --- */
.client-grid-section {
    width: 100%;
    padding: 100px 24px;
    /* background: transparent;  Works with your Morning Glass background */
    display: flex;
    justify-content: center;
}

.inner-container {
    max-width: 1200px;
    width: 100%;
	text-align:center;
}

.grid-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #000f34; 
    margin-bottom: 60px;
    /* opacity: 0.6; */
}

/* --- 2. Grid Layout (Desktop) --- */
.logo-display {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping if you add more logos later */
    justify-content: center;
    align-items: center;
    gap: 120px; /* Wide spacing for monitors */
}

.client-box {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.client-logo {
    height: 80px; /* Fixed height for visual consistency */
    width: auto;
    /* filter: grayscale(100%);
    opacity: 0.5; */
    transition: all 0.4s ease;
}

/* Premium Hover State */
.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.client-box:hover {
    transform: scale(1.05);
}

/* --- 3. Tablet Responsive Adjustments (1024px) --- */
@media (max-width: 1024px) {
    .client-grid-section {
        padding: 80px 20px;
    }
    .logo-display {
        gap: 80px; /* Reduce gap for tablets */
    }
    .client-logo {
        height: 40px; /* Slightly smaller logos */
    }
}

/* --- 4. Mobile Responsive Adjustments (640px) --- */
@media (max-width: 640px) {
    .client-grid-section {
        padding: 60px 16px;
    }
    .logo-display {
        flex-direction: column; /* Stack vertically for thumb-friendly viewing */
        gap: 50px; /* Vertical gap between stacked items */
    }
    .client-logo {
        height: 35px; /* Best size for mobile screens */
    }
}
		
		/* -------------- CLIENT SLIDER */


/* PRODUCT PAGE STYLE - STARTS HERE --------------------- */
    /* --- 1. Global Styles & Theme --- */
        :root {
            --primary-gradient: linear-gradient(115deg, #4f46e5 0%, #7c3aed 40%, #c026d3 100%);
            --slate-900: #0f172a;
            --slate-600: #475569;
            --teal-accent: #0d9488;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            /* Morning Glass Gradient: White -> Ice Blue -> Mint */
            background: linear-gradient(to top, #f0fdf4 0%, #e0f2fe 50%, #ffffff 100%);
            background-attachment: fixed;
            color: var(--slate-900);
            line-height: 1.6;
            padding-top: 80px; /* Space for fixed header */
        }

        /* --- 2. Header & Mobile Menu --- */
        .glass-header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 2000;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            font-weight: 800;
            font-size: 1.4rem;
            color: var(--slate-900);
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            background: var(--primary-gradient);
            border-radius: 8px;
        }

        /* Desktop Nav */
        .nav-links {
            display: flex;
            list-style: none;
            gap: 35px;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--slate-600);
            font-weight: 600;
            font-size: 0.95rem;
            transition: 0.3s;
        }

        .nav-links a.active { color: #4f46e5; }

        .header-cta-desktop {
            background: var(--slate-900);
            color: white;
            padding: 10px 22px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
        }

        /* Mobile Menu UI */
        .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 6px;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 2100;
        }

        .bar { width: 28px; height: 3px; background: var(--slate-900); border-radius: 2px; transition: 0.3s; }

        .menu-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.4);
            display: none;
            z-index: 2040;
        }
		
		.menu-active
		{
			color: #013f76;
			text-decoration: underline;
		}

        /* --- 3. Product Content --- */
        .main-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        .page-title {
            text-align: center;
            margin-bottom: 80px;
        }

        .page-title h1 { font-size: 3rem; margin-bottom: 15px; }

        .product-row {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 40px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
        }

        .product-row:nth-child(even) { flex-direction: row-reverse; }

        .product-info { flex: 1; }

        .product-tag {
            color: var(--teal-accent);
            font-weight: 800;
            /* text-transform: uppercase; */
            font-size: 0.75rem;
            margin-bottom: 10px;
            display: block;
        }

        .product-info h2 { font-size: 2rem; margin-bottom: 20px; }

        .product-image-box {
            flex: 1;
            height: 400px;
            background: #fff;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

        .product-image-box img { width: 100%; height: 100%; object-fit: cover; }

        /* --- 4. Footer --- */
        footer {
            background: rgba(15, 23, 42, 0.05);
            padding: 80px 20px 40px;
            margin-top: 100px;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .copyright { text-align: center; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 30px; color: var(--slate-600); }

        /* --- 5. Responsiveness --- */
        @media (max-width: 768px) {
			.product-info h2 { font-size: 1.5rem; margin-bottom: 20px; }
			
            .header-cta-desktop { display: none; }
            .menu-toggle { display: flex; }
            
            .nav-links {
                position: fixed;
                top: 0; right: -100%;
                width: 280px; height: 100vh;
                background: white;
                flex-direction: column;
                padding: 100px 40px;
                align-items: flex-start;
                transition: 0.4s ease;
                z-index: 2050;
            }

            .nav-links.active { right: 0; }
            .menu-overlay.active { display: block; }
            
            .product-row, .product-row:nth-child(even) {
                flex-direction: column;
                text-align: center;
                gap: 40px;
                padding: 30px;
            }
            
            .product-image-box { width: 100%; height: 250px; }

            .menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
            .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
            .menu-toggle.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
        }
/* --------------------- PRODUCT PAGE STYLE - ENDS HERE  */